<template>
    <div id="payrollList">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            @row-click="handdle"
            
            >

            <el-table-column
            prop="serial"
            label="序号"
            align="center"
            type="index"
            width="50">
            </el-table-column>

            <el-table-column
            prop="staffName"
            label="员工姓名"
            align="center"
            >
            </el-table-column>
            
            <el-table-column
            prop="clientJobNumber"
            align="center"
            label="客户工号">
            </el-table-column>

            <el-table-column
            prop="bank"
            align="center"
            label="开户行">
            </el-table-column>

            <el-table-column
            prop="idNumber"
            align="center"
            :show-overflow-tooltip="true"
            label="证件号码">
            <template slot-scope="scope">
                {{scope.row.idNumber? scope.row.idNumber.replace(/^(.{1})(?:\w+)(.{1})$/, "\$1****************\$2"):""}}
            </template>
            </el-table-column>

            <el-table-column
            prop="cardNo"
            align="center"
            :show-overflow-tooltip="true"
            label="银行卡号">
            <template slot-scope="scope">
                {{scope.row.cardNo? scope.row.cardNo.replace(/^(.{1})(?:\w+)(.{1})$/, "\$1**************2"):""}}
            </template>
            </el-table-column>

            <el-table-column
            prop="financialAccount"
            align="center"
            :show-overflow-tooltip="true"
            label="顺丰金融账号">
            <template slot-scope="scope">
                {{scope.row.cardNo? scope.row.cardNo.replace(/^(.{1})(?:\w+)(.{1})$/, "\$1**************2"):""}}
            </template>
            </el-table-column>

            <el-table-column
            prop="mobile"
            align="center"
            label="手机号码">
            <template slot-scope="scope">
                {{scope.row.cardNo? scope.row.cardNo.replace(/^(.{1})(?:\w+)(.{1})$/, "\$1*********2"):""}}
            </template>
            </el-table-column>

            <el-table-column
            prop="staffState"
            align="center"
            label="用工状态">
            </el-table-column>

            <el-table-column
            label="操作"
            align="center"
            >
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="lookFn(scope.row)">查看</el-button>
                <el-button type="text" size="small" @click="compileFn(scope.row)">编辑</el-button>
            </template>
            </el-table-column>

    </el-table>
    </div>
</template>

<script>
// 请求数据
import {reqAccountInfo} from '../../request/payroll'
  export default {
    data() {
      return {
        tableData: this.$store.state.payrollData
      }
    },
    mounted() {
        // 请求数据列表
        reqAccountInfo().then(res=>{
            this.$store.commit("payrollFn",res)
        })
    },
    methods:{
        compileFn(row){
            // 存到vuex
            this.$store.commit("payrollIndexFn",parseInt(row.serial)-1)
            // 跳转编辑发薪信息
            this.$router.push("/home/paurollCompile")

        },
        handdle(){
            console.log("查看发薪信息");
        },
        lookFn(row){
            // 存到vuex
            this.$store.commit("payrollIndexFn",parseInt(row.serial)-1)
            // 跳转查看发薪信息
            this.$router.push({name:'paurollLook'}).catch(err=>{})
        },
    }
  }
</script>

<style lang="less" scoped>
#payrollList{
    width: 95%;
    margin: 0 auto;
}

</style>